<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>8款炫酷HTML5 Canvas星空背景动画DEMO演示8</title>
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/zzsc-demo.css">
	<style type="text/css">
		.zzsc-content{
			position: relative;
			width: 500px;
			height: 500px;
			margin: 0 auto;
		}
		#holder {
	            position: absolute;
	            width: 480px;
	            height: 480px;
	            top: 0;
	            left: 0;
	        }
                    #holder img {
                        position: absolute;
                        pointer-events: none;
                        top:50%; 
                        left:50%; 
                        margin-top:-130px; 
                        margin-left:-200px;
                    }
	       .center{
	       	text-align: center;
	       }
	</style>
</head>
<body>
	<div class="zzsc-container">
		<header class="zzsc-header">
			<h1>HTML5 Canvas星空背景特效 <span>Interactive Warp Drive Starfield Effect With jQuery</span></h1>
			<div class="zzsc-demo center">
			  <a href="index.html">DEMO1</a>
			  <a href="index2.html">DEMO2</a>
			  <a href="index3.html">DEMO3</a>
			  <a href="index4.html">DEMO4</a>
			  <a href="index5.html">DEMO5</a>
			  <a href="index6.html">DEMO6</a>
                                            <a href="index7.html">DEMO7</a>
			  <a href="index8.html" class="current">DEMO8</a>
			</div>
			<div style="text-align:center;clear:both">
			<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
			<script src="/follow.js" type="text/javascript"></script>
			</div>
		</header>
		<h3 class="center">鼠标hover画布查看加速动画效果。</h3>
		<div class="zzsc-content">
			<div id='holder'><img src="img/Alien_logo.png" alt="Smiley face" height="225" width="400"> </div>
		</div>
	</div>
	
	<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
	<script src='js/jquery.warpdrive.min.js'></script>
	<script>
                $( document ).ready( function() {

                //------------------------------------------------------------------------

                //Settings - params for WarpDrive
                var settings = {

                    width: 480,
                    height: 480,
                    autoResize: false,
                    autoResizeMinWidth: null,
                    autoResizeMaxWidth: null,
                    autoResizeMinHeight: null,
                    autoResizeMaxHeight: null,
                    addMouseControls: true,
                    addTouchControls: true,
                    hideContextMenu: true,
                    starCount: 7777,
                    starBgCount: 4444,
                    starBgColor: { r:0, g:255, b:0 },
                    starBgColorRangeMin: 10,
                    starBgColorRangeMax: 40,
                    starColor: { r:0, g:255, b:0 },
                    starColorRangeMin: 70,
                    starColorRangeMax: 100,
                    starfieldBackgroundColor: { r:0, g:0, b:0 },
                    starDirection: 1,
                    starSpeed: 25,
                    starSpeedMax: 150,
                    starSpeedAnimationDuration: 2,
                    starFov: 200,
                    starFovMin: 250,
                    starFovAnimationDuration: 2,
                    starRotationPermission: true,
                    starRotationDirection: -1,
                    starRotationSpeed: 0.0,
                    starRotationSpeedMax: 1.5,
                    starRotationAnimationDuration: 8,
                    starWarpLineLength: 1.0,
                    starWarpTunnelDiameter: 1000,
                    starFollowMouseSensitivity: 0.015,
                    starFollowMouseXAxis: true,
                    starFollowMouseYAxis: true

                };

                //------------------------------------------------------------------------

                //standalone

                //init
                
                //var warpdrive = new WarpDrive( document.getElementById( 'holder' ) );
                var warpdrive = new WarpDrive( document.getElementById( 'holder' ), settings );

                //------------------------------------------------------------------------

                //jQuery

                //init
                
                //$( '#holder' ).warpDrive();
                //$( '#holder' ).warpDrive( settings );
                
                //------------------------------------------------------------------------

            } );
            </script>
</body>
</html>